<template>
  <div class="bmzibox">
      <div class="zi" v-for="(v,i) in canshu" :key="i">
          <div :class="v.cla">
              <span :class="v.tit"></span>
          </div>
          <p class="title">{{v.title}}</p>
      </div>
  </div>
</template>


<script>

export default {
    // 接收父组件传回来的值
    props:{
        canshu:Array
    }
}
</script>

<style scopde>
    .bmzibox{
        display:flex;
        justify-content: space-evenly;
    }
    .zi{
        width: 15%;
        text-align: center;
    }
    .cla1,.cla2,.cla3,.cla4,.cla5{
        border-radius: 0.15rem;
        line-height: 0.3rem;
        font-size: 0.12rem;
        height: 0.3rem;
        margin: 0.1rem 0;
        color: #fff;
    }
    .cla1{
        background-color:#ff814f;
    }
    .cla2{
        background-color:#609ef1;
    }
    .cla3{
        background-color:#55cfb6;
    }
    .cla4{
        background-color:#ffcd48;
    }
    .cla5{
        background-color:#c6c9d2;
    }
    .title{
        font-size: 0.12rem;
        color: #333;
    }
</style>